<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #music{
            width:60px ;
            height:60px;
            border-radius: 50%;
            background-color: pink;
        }
        .music{

            background:url('./images/music_03.png') no-repeat;
            transition: all 2s;
        }
        .music2{
            background:url('./images/music1_03.png') no-repeat;
            transition: all 2s;
        }



        #video{
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="music" id="music">
    <audio id="audio" src="./张杰、张碧晨 - 只要平凡.mp3" autoplay loop ></audio>
</div>


<div class="ve start" id="ve">
    <video  id="video" src="mp4.mp4"  loop ></video>
</div>
<script>
    var music=document.getElementById('music');
    var audio=document.getElementById('audio');
    var ve=document.getElementById('ve');
    var video=document.getElementById('video');
    music.onclick=function () {
        if(this.classList.contains('music')){ //判断有木有music 有的话替换原有的图片
            this.classList.remove('music');  // 并进行音视屏的开关切换
            this.classList.add('music2');
            audio.pause();
        }else{
            this.classList.remove('music2');
            this.classList.add('music');
            audio.play();
        }
    }




    ve.onclick=function(){
        if(this.classList.contains('start')){
            this.classList.remove('start');
            video.play();
        }else{
            this.classList.add('start');
            video.pause()
        }
    }
</script>
</body>
</html>